<template>
  <div class="listMain">
    <!--分类-->
    <div class="nav-table">
      <div class="long-title"><span class="all-goods">全部分类</span></div>
      <div class="nav-cont">
        <ul>
          <li class="index"><a href="#">首页</a></li>
          <li class="qc"><a href="#">闪购</a></li>
          <li class="qc"><a href="#">限时抢</a></li>
          <li class="qc"><a href="#">团购</a></li>
          <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
          <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
          <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
      </div>
    </div>
    <ol class="am-breadcrumb am-breadcrumb-slash">
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
      <li class="am-active">内容</li>
    </ol>
    <div class="scoll">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="@/assets/images/01.jpg" title="pic"/>
            </li>
            <li>
              <img src="@/assets/images/02.jpg"/>
            </li>
            <li>
              <img src="@/assets/images/03.jpg"/>
            </li>
          </ul>
        </div>
      </section>
    </div>
    <!-- 放大镜 -->
    <div class="item-inform">
      <div class="clearfixLeft" id="clearcontent">
        <div class="box">
          <div class="tb-pic tb-s310">
            <a href="" v-if="mainImg">
              <img-zoom :src="mainImg" width="450" height="450" :bigsrc="mainImg" :configs="configs"></img-zoom>
            </a>
          </div>
          <ul class="tb-thumb" id="thumblist">
            <template v-for="(img,index) in productImgs">
              <li :class="{'tb-selected':index==imgIndex}">
                <div class="tb-pic tb-s40">
                  <a href="#"><img :src="img.url" mid="../images/01_mid.jpg"
                                   big="../images/01.jpg" @click="setMainImg(img.url,index)"></a>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="clear"></div>
      </div>
      <div class="clearfixRight">
        <!--规格属性-->
        <!--名称-->
        <div class="tb-detail-hd">
          <h1>
            <!--            良品铺子 手剥松子218g 坚果炒货 巴西松子-->
            {{ product.productName }}
          </h1>
        </div>
        <div class="tb-detail-list">
          <!--价格-->
          <div class="tb-detail-price">
            <li class="price iteminfo_price">
              <dt>促销价</dt>
              <dd><em>¥</em><b class="sys_item_price" v-if="productSkus">{{ sellPrice }}</b></dd>
            </li>
            <li class="price iteminfo_mktprice">
              <dt>原价</dt>
              <dd><em>¥</em><b class="sys_item_mktprice">{{ originalPrice }}</b></dd>
            </li>
            <div class="clear"></div>
          </div>
          <!--地址-->
          <dl class="iteminfo_parameter freight">
            <dt>配送至</dt>
            <div class="iteminfo_freprice">
              <div class="am-form-content address">
                <select data-am-selected>
                  <option value="a">浙江省</option>
                  <option value="b">湖北省</option>
                </select>
                <select data-am-selected>
                  <option value="a">温州市</option>
                  <option value="b">武汉市</option>
                </select>
                <select data-am-selected>
                  <option value="a">瑞安区</option>
                  <option value="b">洪山区</option>
                </select>
              </div>
              <div class="pay-logis">
                快递<b class="sys_item_freprice">10</b>元
              </div>
            </div>
          </dl>
          <div class="clear"></div>
          <!--销量-->
          <ul class="tm-ind-panel">
            <li class="tm-ind-item tm-ind-sellCount canClick">
              <div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">1015</span>
              </div>
            </li>
            <li class="tm-ind-item tm-ind-sumCount canClick">
              <div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">{{
                  product.soldNum
                }}</span>
              </div>
            </li>
            <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
              <div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span>
              </div>
            </li>
          </ul>
          <div class="clear"></div>
          <!--各种规格-->
          <dl class="iteminfo_parameter sys_item_specpara">
            <dt class="theme-login">
              <div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div>
            </dt>
            <dd>
              <!--操作页面-->
              <div class="theme-popover-mask"></div>
              <div class="theme-popover">
                <div class="theme-span"></div>
                <div class="theme-poptit">
                  <a href="javascript:;" title="关闭" class="close">×</a>
                </div>
                <div class="theme-popbod dform">
                  <form class="theme-signin" name="loginform" action="" method="post">
                    <div class="theme-signin-left">
                      <div class="theme-options" v-if="productSkus.length>1">
                        <div class="cart-title">套餐</div>
                        <ul>
                          <template v-for="(sku,index) in productSkus">
                            <li :class="{'sku-line':true,'selected':index==currentSkuIndex}"
                                @click="setSkuIndex(index)">{{ sku.skuName }}<i></i></li>
                          </template>
                        </ul>
                      </div>
                      <!--显示当前套餐下的属性-->
                      <div class="theme-options" v-if="flavor">
                        <div class="cart-title">口味</div>
                        <ul>
                          <template v-for="(value,index) in flavor">
                            <li :class="{'sku-line':true,'selected':index==flavorIndex}"
                                :data-value="value"
                                @click="setFlavorIndex(index,value)">
                              {{ value }}<i></i></li>
                          </template>
                        </ul>
                      </div>
                      <div class="theme-options" v-if="package">
                        <div class="cart-title">包装</div>
                        <ul>
                          <template v-for="(value,index) in package">
                            <li :class="{'sku-line':true,'selected':index==packageIndex}"
                                @click="setPackageIndex(index,value)">{{ value }}<i></i></li>
                          </template>
                        </ul>
                      </div>
                      <div class="theme-options">
                        <div class="cart-title number">数量</div>
                        <div>
                          <input id="min" class="am-btn am-btn-default" name="" type="button" value="-" @click="min()"/>
                          <input id="text_box" name="" type="text" value="1" style="width:30px;" v-model="cartNum"/>
                          <input id="add" class="am-btn am-btn-default" name="" type="button" value="+" @click="add()"/>
                          <span id="Stock" class="tb-hidden">库存<span class="stock">{{ stock }}</span>件</span>
                        </div>
                      </div>
                      <div class="clear"></div>
                      <div class="btn-op">
                        <div class="btn am-btn am-btn-warning">确认</div>
                        <div class="btn close am-btn am-btn-warning">取消</div>
                      </div>
                    </div>
                    <div class="theme-signin-right">
                      <div class="img-info">
                        <img src="@/assets/images/songzi.jpg"/>
                      </div>
                      <div class="text-info">
                        <span class="J_Price price-now">¥39.00</span>
                        <span id="" class="tb-hidden">库存<span class="stock">1000</span>件</span>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </dd>
          </dl>
          <div class="clear"></div>
          <div class="shopPromotion gold">
            <div class="hot">
              <dt class="tb-metatit">折扣</dt>
              <div class="gold-list">
                <p>当前套餐享{{ discounts }}折优惠<!--<span>点击领券<i class="am-icon-sort-down"></i></span>--></p>
              </div>
            </div>
            <div class="clear"></div>
            <div class="coupon">
              <dt class="tb-metatit">优惠券</dt>
              <div class="gold-list">
                <ul>
                  <li>125减5</li>
                  <li>198减10</li>
                  <li>298减20</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="pay">
          <div class="pay-opt">
            <a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
            <a><span class="am-icon-heart am-icon-fw">收藏</span></a>

          </div>
          <li>
            <div class="clearfix tb-btn tb-btn-buy theme-login">
              <a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
            </div>
          </li>
          <li>
            <div class="clearfix tb-btn tb-btn-basket theme-login">
              <a id="LikBasket" title="加入购物车" @click="addShopCart"><i></i>加入购物车</a>
            </div>
          </li>
        </div>
      </div>
      <div class="clear"></div>
    </div>


    <!--优惠套装-->
    <div class="match">
      <div class="match-title">优惠套装</div>
      <div class="match-comment">
        <ul class="like_list">
          <li>
            <div class="s_picBox">
              <a class="s_pic" href="#"><img src="@/assets/images/cp.jpg"></a>
            </div>
            <a class="txt" target="_blank" href="#">萨拉米 1+1小鸡腿</a>
            <div class="info-box"><span class="info-box-price">¥ 29.90</span> <span
                class="info-original-price">￥ 199.00</span></div>
          </li>
          <li class="plus_icon"><i>+</i></li>
          <li>
            <div class="s_picBox">
              <a class="s_pic" href="#"><img src="@/assets/images/cp2.jpg"></a>
            </div>
            <a class="txt" target="_blank" href="#">ZEK 原味海苔</a>
            <div class="info-box"><span class="info-box-price">¥ 8.90</span> <span
                class="info-original-price">￥ 299.00</span></div>
          </li>
          <li class="plus_icon"><i>=</i></li>
          <li class="total_price">
            <p class="combo_price"><span class="c-title">套餐价:</span><span>￥35.00</span></p>
            <p class="save_all">共省:<span>￥463.00</span></p> <a href="#" class="buy_now">立即购买</a>
          </li>
          <li class="plus_icon"><i class="am-icon-angle-right"></i></li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
    <div class="introduce">
      <div class="browse">
        <div class="mc">
          <ul>
            <div class="mt">
              <h2>看了又看</h2>
            </div>

            <li class="first">
              <div class="p-img">
                <a href="#"> <img class="" src="@/assets/images/browse1.jpg"> </a>
              </div>
              <div class="p-name"><a href="#">
                【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
              </a>
              </div>
              <div class="p-price"><strong>￥35.90</strong></div>
            </li>
            <li>
              <div class="p-img">
                <a href="#"> <img class="" src="@/assets/images/browse1.jpg"> </a>
              </div>
              <div class="p-name"><a href="#">
                【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
              </a>
              </div>
              <div class="p-price"><strong>￥35.90</strong></div>
            </li>
            <li>
              <div class="p-img">
                <a href="#"> <img class="" src="@/assets/images/browse1.jpg"> </a>
              </div>
              <div class="p-name"><a href="#">
                【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
              </a>
              </div>
              <div class="p-price"><strong>￥35.90</strong></div>
            </li>
            <li>
              <div class="p-img">
                <a href="#"> <img class="" src="@/assets/images/browse1.jpg"> </a>
              </div>
              <div class="p-name"><a href="#">
                【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
              </a>
              </div>
              <div class="p-price"><strong>￥35.90</strong></div>
            </li>
            <li>
              <div class="p-img">
                <a href="#"> <img class="" src="@/assets/images/browse1.jpg"> </a>
              </div>
              <div class="p-name"><a href="#">
                【三只松鼠_开口松子218g】零食坚果特产炒货东北红松子原味
              </a>
              </div>
              <div class="p-price"><strong>￥35.90</strong></div>
            </li>

          </ul>
        </div>
      </div>
      <div class="introduceMain">
        <div class="am-tabs" data-am-tabs>
          <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
            <li :class="{'am-active':tag==0}">
              <span class="index-needs-dt-txt" @click="setTag(0)">宝贝详情</span>

            </li>

            <li :class="{'am-active':tag==1}">


              <span class="index-needs-dt-txt" @click="setTag(1)">全部评价</span>

            </li>

            <li :class="{'am-active':tag==2}">


              <span class="index-needs-dt-txt" @click="setTag(2)">猜你喜欢</span>
            </li>
          </ul>

          <div class="am-tabs-bd">
            <!--商品参数-->
            <DetailParams :productId="productId" :product="product" v-if="tag==0"></DetailParams>
            <!--商品评价-->
            <DetailComments :productId="productId" v-if="tag==1"></DetailComments>
            <!--猜你喜欢-->
            <DetailFavourite :productId="productId" v-if="tag==2"></DetailFavourite>
          </div>

        </div>

        <div class="clear"></div>

        <div class="footer">
          <div class="footer-hd">
            <p>
              <a href="#">恒望科技</a>
              <b>|</b>
              <a href="#">商城首页</a>
              <b>|</b>
              <a href="#">支付宝</a>
              <b>|</b>
              <a href="#">物流</a>
            </p>
          </div>
          <div class="footer-bd">
            <p>
              <a href="#">关于恒望</a>
              <a href="#">合作伙伴</a>
              <a href="#">联系我们</a>
              <a href="#">网站地图</a>
              <em>© 2015-2025 Hengwang.com 版权所有</em>
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import ImgZoom from 'vue2.0-zoom'
import DetailComments from "@/components/detail/DetailComments";
import DetailParams from "@/components/detail/DetailParams";
import DetailFavourite from "@/components/detail/DetailFavourite";
import {addShopCart} from "@/api/cart";
export default {
  name: "DetailNav",
  props: ['productId', 'product', 'productImgs', 'productSkus', 'productParams'],
  components: {
    ImgZoom,
    DetailParams,
    DetailComments,
    DetailFavourite
  },
  data() {
    return {
      configs: {
        width:450,
        height:450,
        maskWidth:100,
        maskHeight:100,
        maskColor:'red',
        maskOpacity:0.1
      },
      mainImg: '',
      imgIndex: 0,
      currentSkuIndex: 0,
      sellPrice: '',
      originalPrice: '',
      discounts: '',
      skuProps: {},
      flavor: [],//口味
      package: [],//包装
      flavorIndex: 0,
      packageIndex: 0,
      cartNum: 1,
      tag: 0,
      stock:0,
      chooseSkuProps:{}//用于记录选择的套餐属性
    }
  },
  created() {

  },
  updated() {
    // console.log('组件' + JSON.stringify(this.product))
    // console.log('组件' + JSON.stringify(this.productImgs))
  }
  ,
  mounted() {

  }
  ,
  methods: {
    setMainImg(imgUrl, imgIndex) {
      console.log(imgUrl)
      this.mainImg = imgUrl;
      this.imgIndex = imgIndex;
    }
    ,
    setSkuIndex(index) {
      this.currentSkuIndex = index;
      this.stock=this.productSkus[index].stock;
      this.sellPrice = this.productSkus[index].sellPrice;
      this.originalPrice = this.productSkus[index].originalPrice;
      this.discounts = this.productSkus[index].discounts * 10;
      this.skuProps = eval('(' + this.productSkus[index].untitled + ')');
      this.flavor = this.skuProps.口味;
      this.package = this.skuProps.包装;
      this.flavorIndex = 0;
      this.packageIndex = 0;
      for (var key in this.skuProps){
        this.chooseSkuProps[key]=this.skuProps[key][0];
        console.log(this.chooseSkuProps)
      }

    }
    ,
    setFlavorIndex(index,value) {
      this.flavorIndex = index;
      console.log('口味:'+value)
      this.chooseSkuProps['口味']=value;
      console.log(this.chooseSkuProps)
    }
    ,
    setPackageIndex(index,value) {
      this.packageIndex = index;
      console.log('包装:'+value)
      this.chooseSkuProps['包装']=value;
      console.log(this.chooseSkuProps)
    }
    ,
    min() {
      if (this.cartNum > 1) {
        this.cartNum--;
      }
    }
    ,
    add() {
      if (this.cartNum < this.productSkus[this.currentSkuIndex].stock) {
        this.cartNum++;
      }
    },
    setTag(tag) {
      this.tag = tag;
    },
    addShopCart(){
      //套餐属性转换成字符串
      var propStr='';
      for(var key in this.chooseSkuProps){
        propStr+=key+':'+this.chooseSkuProps[key]+';';
      }
      //从store中获取userId
      var uid=this.$store.state.id
      //购物车信息
      var shopCart={
        productId:this.productId,
        cartNum:this.cartNum,
        userId:uid,
        productPrice:this.productSkus[this.currentSkuIndex].sellPrice,
        skuId:this.productSkus[this.currentSkuIndex].skuId,
        skuProps:propStr
      }
      //console.log(shopCart)
      //添加购物车
      addShopCart(shopCart).then(data => {
        const res=data.data;
        if (res.success) {
          this.$message({
            message: '购物车添加成功',
            type: 'success'
          });
        }else {
          if (this.$store.state.token ==null){
            this.$notify({
              title: '提示',
              message: '正在跳转到登录界面请稍等。。。',
              type: 'success'
            });
            setTimeout(()=>{
              this.$router.push('/login'+'?redirect=/detail?pid='+this.$route.query.pid)},3000)
          }
        }

      }).catch(error => {
        this.$message({
          message:error,
          type: 'error'
        });
      })

    },
  }
  ,
  watch: {
    productImgs: function (newVal, oldVal) {
      this.mainImg = newVal[0].url;
    }
    ,
    productSkus: function (newVal, oldVal) {
      this.stock=newVal[0].stock;
      this.sellPrice = newVal[0].sellPrice;
      this.originalPrice = newVal[0].originalPrice;
      this.discounts = newVal[0].discounts * 10;
      this.skuProps = eval('(' + newVal[0].untitled + ')')
      console.log(JSON.stringify(this.skuProps))
      this.flavor = this.skuProps.口味;
      this.package = this.skuProps.包装;
      for (var key in this.skuProps){
          this.chooseSkuProps[key]=this.skuProps[key][0];
          console.log(this.chooseSkuProps)
      }

    }
  }
}
</script>

<style scoped>
#text_box {
  text-align: center;
}
.footer{
  margin-bottom: 0px;
}
</style>